<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>prototype</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Anne Pajon">
	<!-- Date: 2013-09-25 -->
	<script type="text/javascript" charset="utf-8" src="../DataTables-1.9.4/media/js/jquery.js"></script>
	<script type="text/javascript" charset="utf-8" src="../DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
	
	<style type="text/css" title="currentStyle">
	    @import "../DataTables-1.9.4/media/css/demo_page.css";
        @import "../DataTables-1.9.4/media/css/demo_table.css";
    </style>

    
</head>
<body id="dt_example">
    
    <div id="container">
		<div class="full_width big">
			Prototype
		</div>

        <script>
            var fileHeaders = ['File ID', 'Type', 'Status'];
            var fileData = [];
            var output = [];
        </script>
		<h1>Files</h1>
		<p>Please select files to parse</p>
        <input type="file" id="files" name="files[]" multiple></input>
        <output id="list"></output>

        <script>

            function handleFileSelect(evt) {
                var files = evt.target.files; // FileList object
                // Loop through the FileList 
                for (var i = 0, f; f = files[i]; i++) {

                    // Only process text files.
                    if (!f.type.match('text.*')) {
                        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                                          'file type not supported',
                                          '</li>');
                    } else {

                        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                                          f.size, ' bytes, last modified: ',
                                          f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                                          '</li>');
                        console.log(f.name);
                        console.log(output);
                        fileData[i] = f.name;
                        console.log(fileData);

                        var reader = new FileReader();

                        // Closure to capture the file information.
                        reader.onload = (function(theFile) {
                            return function(e) {
                                // Render thumbnail.
                                //var span = document.createElement('span');
                                //span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
                                //document.getElementById('list').insertBefore(span, null);
                                //var content = reader.readAsText(f);
                                //document.getElementById("list").innerHTML = e.target.result;
                                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
                            };
                        })(f);

                        // Read in the files as a data URL.
                        reader.readAsText(f);
                    }
                }
            }

            document.getElementById('files').addEventListener('change', handleFileSelect, false);

            $(document).ready( function () {
                $('#table_id').dataTable();
            } );
        </script>

		<h1>Tables</h1>
		<p>Status of files parsed</p>
		<div id="dynamic"></div>
		<div class="spacer"></div>
        <table id="table_id" class="display">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
                <tr>
                    <td>Row 2 Data 1</td>
                    <td>Row 2 Data 2</td>
                </tr>
            </tbody>
        </table>

	</div>
    
</body>
</html>
